<template>
    <div class="classIfy">
      <div class="classIfy-top">
          <span class="vertical"></span>
          <div class="classIfy-title">{{classIfyName}}系列</div>
      </div>
      <div class="classIfy-content" v-if="has_secondary == 0">
        <div class="classIfy-list" v-for="(item,index) in classIfyList" :key="index" @click="navigateToDetail(item.id)">
          <div class="classIfy-list-top" ><img :src="item.img_url" alt=""></div>
          <div class="classIfy-list-bottom">{{item.name}}</div>
        </div>
      </div>
      <div v-else>
        <div class="classIfy-secondary" v-for="(item,num) in classIfyList" :key="num">
          <div class="secondary-title">{{item.name}}</div>
          <div class="secondary-list-warp">
            <div class="secondary-list" v-for="(item1,num1) in item.activity_list" :key="num1" @click="navigateToDetail(item1.id)">
              <div class="secondary-list-top" ><img :src="item1.img_url" alt=""></div>
              <div class="secondary-list-bottom">{{item1.name}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
// import wxParse from 'mpvue-wxparse'
import { getActivityList } from '../../api/index.js'

export default {
  data(){
    return {
      classIfyList: [],
      ClassifyId: '',
      classIfyName: '',
      limit: 8,
      page: 0,
      reachBottomFlag: true, // 没有数据了不再发送请求
      has_secondary: null,
    }
  },
  // components:{
  //   wxParse
  // },
  onShow(){
    this.page = 0;
    this.classIfyList = [];
    this.reqSelectClassify(this.ClassifyId);
  },
  onLoad(option){
    this.ClassifyId = option.ClassifyId;
    this.has_secondary = option.has_secondary;
    this.classIfyName = option.ClassifyName;
    wx.setNavigationBarTitle({
      title: this.classIfyName
    })
  },
  //下拉刷新
  onPullDownRefresh () {
    this.page= 0;
    this.reachBottomFlag = true;
    this.reqSelectClassify(this.ClassifyId);
  },
  //上拉加载
  onReachBottom () {
    if(this.reachBottomFlag){
      this.page++;
      this.reqSelectClassify(this.ClassifyId);
    }
  },
  methods:{
    //获取分类查询后的数据
    async reqSelectClassify(ClassifyId){
      var userToken = wx.getStorageSync('userToken');
      let params = { 
        user_token: userToken,
        classify_id: ClassifyId,
        limit: this.limit,
        page: this.page
      };
      let res = await getActivityList(params);
      if(res.data.level == "success"){
        let classifyActivityList = res.data.activities;
        if(params.page== 0){
          if(classifyActivityList.length == 0){
              wx.showToast({
              title: '该分类暂无活动',
              icon: 'none',
              duration: 1000
            })
          }
          this.classIfyList = classifyActivityList;
        }else{
          this.classIfyList = this.classIfyList.concat(classifyActivityList);
        }
      }else{
        wx.showToast({
          title: '获取分类活动列表失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
    //跳转到对应活动详情
    navigateToDetail(id){
      wx.navigateTo({
        url: '/pages/detail/main?id='+id
      })
    },
  }
}
</script>

<style lang="stylus" scoped>
  .classIfy
    width 100%
    padding 0 10rpx
    margin-top 14rpx
    .classIfy-top
      display flex
      padding 0 0 10rpx 10rpx
      .vertical
        width 6rpx
        height 28rpx
        background-color black
      .classIfy-title
        font-size 15px
        margin-left 10rpx
        font-weight 600 
    .classIfy-content
      display flex
      align-items center
      flex-wrap wrap
      .classIfy-list
        width 50%
        padding 10rpx
        display flex
        justify-content center
        align-items center
        flex-direction column
        .classIfy-list-top
          width 100%
          height 180rpx
          img
            width 100%
            height 180rpx    
        .classIfy-list-bottom
          font-size 12px
          line-height 16px
          pading 8rpx
          text-align center
          color #ccc
          width 100%
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
    .classIfy-secondary
      .secondary-title
        width 100%
        height 70rpx
        line-height 70rpx
        font-size 14px
        text-align left
      .secondary-list-warp
        display flex
        align-items center
        flex-wrap wrap
        .secondary-list
          width 50%
          padding 10rpx
          display flex
          justify-content center
          align-items center
          flex-direction column
          .secondary-list-top
            width 100%
            height 180rpx
            img
              width 100%
              height 180rpx    
          .secondary-list-bottom
            font-size 12px
            line-height 16px
            pading 8rpx
            color #ccc
            overflow hidden
            text-overflow ellipsis
            display -webkit-box
            -webkit-line-clamp 3
            -webkit-box-orient vertical
</style>